<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习vue</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin: 6px;
        }
    </style>
</head>
<body>
    <div id="root2">
        <h1>组件2</h1>
        <school></school>
        <!-- 没有脚手架的话尽量不要用自闭和的自定义标签，会无效 -->
        <school/>
    </div>
    <div id="root">
        <hr>
        <hr>
        <h1>组件1</h1>
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <student></student>
        <hr>
        <student></student>
        <hr>
        <student></student>
        <hr>
        <student></student>
        <hr>
        <student></student>
        <hr>
        <student></student>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        // 第一步：创建组件完毕
        // 定义组件关键字extend,定义组件的变量名
        // const school = Vue.extend({
        // 可以简写成
        // const school = ({
        //     template:`
        //         <div>    
        //             <h1>学校{{name}}{{address}}</h1>
        //         </div>
        //     `,
        //     // 组件定义时不要写el，所有的组件都要被1个vm管理，vm决定服务于那个组件
        //     // el:'#root',
        //     // data必须使用函数式，做成每次调用的对象都不一样的模式。
        //     data(){
        //         return {
        //             name:'zzz1',
        //             address:"zzzzzzzzfffffff"
        //         }
        //     },
        // })
        // 可以简写成，无括号形式
        const school = {
            template:`
                <div>    
                    <h1>学校{{name}}{{address}}</h1>
                </div>
            `,
            // 组件定义时不要写el，所有的组件都要被1个vm管理，vm决定服务于那个组件
            // el:'#root',
            // data必须使用函数式，做成每次调用的对象都不一样的模式。
            data(){
                return {
                    name:'zzz1',
                    address:"zzzzzzzzfffffff"
                }
            },
        }
        const student = Vue.extend({
            template:`
                <div>    
                    <h1>学生{{name}}{{age}}</h1>
                    // this.age++不起作用
                    <button @click="this.age++">age++</button>
                    <button @click="addAge">age++</button>
                </div>
            `,
            data(){
                return {
                    name:'zzz1',
                    age:29
                }
            },
            methods:{
                addAge(){
                    this.age++
                }
            }
        })
        //全局注册组件
        Vue.component('school',school)
        new Vue({
            el:'#root',
            // 第二步：(局部注册)注册组件完毕
            // 局部注册用的多。
            components:{
                // 左边是组件名称，右边是组件的变量名
                // school:school,
                // student:student,
                // 可以简写成
                school,
                student,
                // 这种写法要脚手架支持。
                //MySchool,
                // 组件名不能写html原有元素
                // h2,div,
            },
        })
        new Vue({
            el:'#root2',
        })
    </script>    
</body>
</html>